<template>
  <div class="device-list">
    <div class="component-title">
      <dv-decoration-3 style="width:200px;height:20px;" />
      <span></span>
    </div>

    <div class="list-content">
      <div class="device-board">
        <dv-scroll-board :config="deviceConfig" />
      </div>
      
      <div class="device-stats">
        <dv-border-box-13>
          <div class="stats-content">
            <div class="stats-title">设备状态统计</div>
            <dv-capsule-chart :config="statsConfig" />
          </div>
        </dv-border-box-13>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const deviceConfig = ref({
  header: ['设备名称', '类型', '状态', '最后更新'],
  data: [
    ['温度传感器', '土壤检测', '在线', '1分钟前'],
    ['湿度传感器', '土壤检测', '在线', '1分钟前'],
    ['氮含量传感器', '土壤检测', '在线', '2分钟前'],
    ['磷含量传感器', '土壤检测', '在线', '2分钟前'],
    ['钾含量传感器', '土壤检测', '在线', '2分钟前'],
    ['监控摄像头', '视频监控', '在线', '实时'],
  ],
  index: true,
  columnWidth: [80, 80, 60, 80],
  align: ['center'],
  rowNum: 6,
  headerHeight: 35,
  headerBGC: '#0f1325',
  oddRowBGC: '#0f2167',
  evenRowBGC: '#0a1949',
  waitTime: 2000
})

const statsConfig = ref({
  data: [
    {
      name: '在线设备',
      value: 6
    },
    {
      name: '离线设备',
      value: 0
    },
    {
      name: '故障设备',
      value: 0
    }
  ],
  colors: ['#37a2da', '#67e0e3', '#fd666d'],
  unit: '台',
  showValue: true
})

onMounted(() => {
  // 获取设备列表数据
})
</script>

<style scoped>
.device-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.component-title {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.component-title span {
  margin-left: 10px;
  font-size: 18px;
  color: #7ec699;
}

.list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  min-height: 0;
}

.device-board {
  height: 240px;
}

.device-board :deep(.dv-scroll-board) {
  width: 100%;
  height: 100%;
}

.device-stats {
  flex: 1;
  min-height: 180px;
}

.device-stats :deep(.dv-border-box-13) {
  width: 100%;
  height: 100%;
}

.stats-content {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.stats-title {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #7ec699;
  font-size: 16px;
}

:deep(.dv-scroll-board .header) {
  font-size: 14px;
  color: #7ec699;
}

:deep(.dv-scroll-board .rows) {
  font-size: 13px;
  color: #fff;
}

:deep(.dv-capsule-chart) {
  flex: 1;
}
</style> 